//用rem写
@import './adapter.less';
@import './YSY_common.less';
@commonWidth:32;
@commonColor:#ff841d;


html,body{
    width:100%;
    height:100%;
    max-width: 640px;
    min-width:320px;
    // background-color: aquamarine;
}
.layout{
    height:100%;
    width:100%;
    //头部
    header{
        padding:5px;
        height: 50px;
        width:100%;
        background-color: @commonColor;
        display: flex;
        justify-content: space-between;
        padding: 6px;
        .ysy_header_logo{
            flex:12;
            height:100%;
            display: flex;
            align-items: center;
          
            img{
                height:60%;
            }
        }
        .ysy_header_app{
            display: flex;
            flex:2;
            height:100%;
            flex-direction: column;
            img{
                align-self: flex-end;
                width:40%;
                height:90%;
            }
        }
    }
    // 搜索框
    .ysy_search{
        width:100%;
        background-color: #fff;
        text-align: center;
        margin-bottom: 10rem/@commonWidth;
        form{
            padding:0;
            margin: 0;
            position: relative;
            display: flex;
            justify-content:space-around;
            flex-wrap: nowrap;
            padding:15rem/@commonWidth;
            input{
                border-radius: 20rem/@commonWidth;
            }
            input[type='search']{
                padding:0;
                margin:0;
                flex:9;   
                text-indent:20rem/@commonWidth;
            }
            input[type='submit']{
              flex:1;
              background-color: @commonColor;
              margin-left:5rem/@commonWidth;
              border:none;
              margin-left:8rem/@commonWidth;
            }
        }
    }
    // 菜单栏
    .ysy_menu{
        width:100%;
        background-color: #fff;
        margin-bottom: 15rem/@commonWidth;
        .menu_li{
            width:100%;
            overflow: hidden;
            ul{
                width: 100%;
                display: flex;
            
                flex-wrap: wrap;
                li{
                    width:25%;
                    
                    a{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        width:100%;
                        padding:15rem/@commonWidth;
                        img{
                            width:40%;
                        }
                        p{
                            color:#000;
                            font-size: 16px;
                        }
                    }
                }
                li:nth-last-of-type(-n+4){
                    display: block;
                }

                
            }
        }
    }
    //推荐栏

    .ysy_recommond{
      .recommond_list_all{
          display: flex;
          padding:15rem/@commonWidth;
            background-color: #fff;
            border-bottom: 1px solid #666;
          .recommond_list_left{
              flex:3;
                text-align: center;
              a{
                  width:70%;
                  img{
                      width:70%;
                  }
              }
          }
          .recommond_list_right{
              flex:8;
              display: flex;
              padding:25rem/@commonWidth 0;
              a{
                  width:100%;
                 position: relative;
                  h5{
                    color:black;
                    font-size: 12rem/@commonWidth;
                  }
                  .recommond_price{
                      font-size:14rem/@commonWidth;
                      color:red;
                  }
                  span{
                      font-size:20rem/@commonWidth;
                      color:#666;
                  }
                  .recommond_comment{
                      position: absolute;
                      right:0;
                      bottom:20rem/@commonWidth;
                  }
              }
           
          }
      }
      .recommond_more{
          border:1px solid rgb(224, 203, 203);
          width:100%;
          text-align: center;
          margin:15rem/@commonWidth 0;
          background-color: #fff;
          padding:10rem/@commonWidth 0;

          a{
              font-size: 14px;
          }
      }
    }
    .heightTransition{
        transition: height 20s;
    }

  
    
}


